<template>
    <div class="tiptap-renderer" ref="editorRef"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue'
  import { Editor } from '@tiptap/core'
  import StarterKit from '@tiptap/starter-kit'
  
  const props = defineProps({
    content: {
      type: String,
      default: ''
    }
  })
  
  const editorRef = ref(null)
  let editor = null
  
  onMounted(() => {
    editor = new Editor({
      element: editorRef.value,
      extensions: [StarterKit],
      content: props.content,
      editable: false
    })
  })
  
  watch(() => props.content, (newContent) => {
    if (editor) {
      editor.commands.setContent(newContent)
    }
  })
  </script>
  
  <style>
  .tiptap-renderer {
    padding: 0.5rem;
    max-height: 150px;
    overflow: hidden;
  }
  
  .tiptap-renderer:focus {
    outline: none;
  }
  
  /* 添加TipTap的默认样式 */
  .tiptap-renderer p {
    margin: 0.5rem 0;
  }
  /* 其他样式... */
  </style>